<template>
  <div>
    <SelfAdaption v-if="!useTableSearchBar">
      <Form
        :model="searchForm"
        ref="userSearchForm"
        slot="adaption-bar"
        label-position="top"
        inline
        @submit.native.prevent
      >
        <!-- 项目名称 -->
        <Form-item :label="$t('module.importExport.templateCode')">
          <Input
            v-model="searchForm.templateCode"
            :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateCode')"
          ></Input>
        </Form-item>
        <!-- 合同名称 -->
        <Form-item :label="$t('module.importExport.templateName')">
          <Input
            v-model="searchForm.templateName"
            :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateName')"
          ></Input>
        </Form-item>
        <Form-item prop="button" class="search-solt-btn">
          <!-- handler bar 查询/重置-->
          <div>
            <RPButton optType="search" @click="searchHandler" />
            <RPButton optType="reset" @click="resetHandler" />
          </div>
        </Form-item>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="tableRef" :config="tableConfig">
      <!-- table bar 添加-->
      <div slot="table-bar">
        <Button @click.native="addTemplate(undefined)">新增</Button>
        <Button @click.native="importFile">导入</Button>
      </div>
      <Form
        :model="searchForm"
        v-if="useTableSearchBar"
        ref="userSearchForm"
        slot="table-search-bar"
        label-position="top"
        inline
        @submit.native.prevent
      >
        <!-- 项目名称 -->
        <Form-item>
          <Input
            v-model="searchForm.templateCode"
            :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateCode')"
            @on-enter="searchHandler"
            @on-blur="searchHandler"
          ></Input>
        </Form-item>
        <!-- 合同名称 -->
        <Form-item>
          <Input
            v-model="searchForm.templateName"
            :placeholder="$t('common.pleaseInput') + $t('module.importExport.templateName')"
            @on-enter="searchHandler"
            @on-blur="searchHandler"
          ></Input>
        </Form-item>
      </Form>
    </InnerPageTable>
  </div>
</template>

<script>
import { ImportView } from "@ripples/ui-components";
import AddTemplate from "./AddTemplate";
import { temColumns } from "./columns";
import { getRoleList, deleteRule } from "@/api/ImportExport";
import local from "./locales.js";

export default {
  name: "ImportExport",
  components: {},
  mixins: [local],
  data() {
    return {
      searchForm: {
        templateCode: "",
        templateName: ""
      }
    };
  },
  computed: {
    tableConfig() {
      return { loadDataFn: getRoleList, columnsFn: temColumns.bind(this), autoFirst: true, initParam: this.searchForm };
    }
  },
  methods: {
    importFile() {
      new this.$pageModal(
        ImportView,
        {
          props: {
            templateCode: "20210917062722"
          }
        },
        data => {
          data && this.searchHandler();
        }
      );
    },
    addTemplate(row) {
      new this.$pageModal(
        AddTemplate,
        {
          props: {
            rowInfo: row
          }
        },
        data => {
          data && this.searchHandler();
        }
      );
    },
    searchHandler() {
      this.$refs["tableRef"].load(this.searchForm, 1);
    },
    resetHandler() {
      this.searchForm.templateCode = ""
      this.searchForm.templateName = ""
      this.searchHandler(1);
    },
    deleteHandler(id) {
      this.$confirm.warning(this.$t("common.warning.confirmToDelete")).then(() => {
        deleteRule(id).then(() => {this.searchHandler()});
        this.$message.success({
          content: this.$t("common.deleteSuccess"),
          duration: 3
        });
        
      });
    }
  }
};
</script>

<style></style>
